<template>
    <div>
        <a-form @keypress.enter="handleSearch">
            <flexbox align="flex-start">
                <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                    <div style="display: flex; align-items: center" v-if="item.formType === 'createDate'">
                        <div style="width: 70px; margin-right: 12px" v-fitText>{{ item.title }} :</div>
                        <h-range-picker-cell
                            :value="[
                                form.startTime ? $moment(form.startTime, 'YYYY-MM-DD') : null,
                                form.endTime ? $moment(form.endTime, 'YYYY-MM-DD') : null
                            ]"
                            @change="rangeDateChange($event, item.field)"
                        />
                    </div>
                    <h-dic-select
                        :type="item.type || item.field"
                        :title="item.title"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'dicSelect'"
                    />
                    <a-input
                        class="cell-item"
                        allowClear
                        :placeholder="item.placeholder"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'input'"
                    />
                </flexbox>
                <HSuggestInput
                    class="cell-item"
                    allowClear
                    placeholder="请输入版本名称"
                    v-model:value="searchKeyword"
                    style="max-width: 200px"
                    @change="handleSearch"
                />
                <flexbox class="cell-item margin-r-16" style="min-width: 50px" v-if="fieldList.length + 1 > showFieldMaxNum">
                    <h-show-more-select
                        :options="fieldList.slice(showFieldMaxNum - 1)"
                        v-model:value="extendedSearchArr"
                        @change="handleExtendedSearchArrChange"
                    />
                </flexbox>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </a-form>

        <flexbox class="margin-t-8" v-if="extendedSearchArr.length">
            <flexbox class="cell-item" v-for="item of extendedSearchArr" :key="item.field">
                <flexbox v-if="item.formType === 'onlineDate'">
                    <div style="width: 70px; font-size: 13px; margin-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
                        >{{ item.title }} :</div
                    >
                    <h-range-picker-cell
                        :placeholder="item.placeholder"
                        :value="[
                            form.onlineRealTimeStart ? $moment(form.onlineRealTimeStart, 'YYYY-MM-DD') : null,
                            form.onlineRealTimeEnd ? $moment(form.onlineRealTimeEnd, 'YYYY-MM-DD') : null
                        ]"
                        @change="rangeDateChange($event, item.field)"
                    />
                </flexbox>
                <close-circle-filled class="margin-l-8" style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" @click="handleDeleteSearchItem(item)" />
            </flexbox>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { HRangePickerCell, HDicSelect, HShowMoreSelect, HSuggestInput } from '@/components';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HRangePickerCell,
        HDicSelect,
        HShowMoreSelect,
        CloseCircleFilled,
        HSuggestInput
    },
    emits: ['search'],
    setup(_, { emit }) {
        const { saveHistory } = useSearchHistory();
        const form: any = ref({
            versionNumber: null,
            status: null,
            createUser: null,
            startTime: null,
            endTime: null,
            onlineRealTimeStart: null,
            onlineRealTimeEnd: null
        });
        const fieldList = ref<any>([
            { field: 'versionNumber', placeholder: '请输入版本号', formType: 'input' },
            { field: 'status', type: 'versionStatus', title: '状态', placeholder: '状态', formType: 'dicSelect' },
            { field: 'createUser', placeholder: '请输入创建人', formType: 'input' },
            { field: 'createTime', title: '创建时间', formType: 'createDate' },
            { field: 'realTime', title: '上线时间', formType: 'onlineDate' }
        ]);
        const showFieldMaxNum = ref<number>(5);
        const searchKeyword = ref<string>('');
        const extendedSearchArr = ref<string[]>([]);
        // 重置搜索条件
        const handleReset = () => {
            form.value = {
                versionNumber: null,
                status: null,
                createUser: null,
                startTime: null,
                endTime: null,
                onlineRealTimeStart: null,
                onlineRealTimeEnd: null
            };
            searchKeyword.value = '';
        };
        const rangeDateChange = (val, field) => {
            const { startTime, endTime } = val;
            if (field === 'createTime') {
                form.value.startTime = startTime;
                form.value.endTime = endTime;
            }
            if (field === 'realTime') {
                form.value.onlineRealTimeStart = startTime;
                form.value.onlineRealTimeEnd = endTime;
            }
        };
        const handleSearch = () => {
            if (unref(searchKeyword)) {
                saveHistory(unref(searchKeyword));
            }
            emit('search', {
                ...unref(form),
                versionName: unref(searchKeyword)
            });
        };
        const handleDeleteSearchItem = (target) => {
            const index = unref(extendedSearchArr).findIndex((item: any) => item.field === target.field);
            if (index >= 0) {
                if (target.field === 'realTime') {
                    form.value.onlineRealTimeStart = null;
                    form.value.onlineRealTimeEnd = null;
                }
                handleSearch();
                extendedSearchArr.value.splice(index, 1);
            }
        };
        // 用于清除更多里面所选项已选择的数据，因为只删除extendedSearchArr里所选项是不行的，还要删除对应所选项已选择的数据
        const handleExtendedSearchArrChange = (val) => {
            unref(fieldList)
                .slice(unref(showFieldMaxNum) - 1)
                .forEach((item) => {
                    if (val.length) {
                        const res = val.some((elem) => item.field === elem.field);
                        if (!res) {
                            form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                        }
                    } else {
                        form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                    }
                });
        };
        return {
            form,
            searchKeyword,
            extendedSearchArr,
            rangeDateChange,
            handleSearch,
            handleReset,
            handleDeleteSearchItem,

            showFieldMaxNum,
            fieldList,
            handleExtendedSearchArrChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>
